<template>
    <div>
        <!-- 页头 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>栏目编辑</el-breadcrumb-item>
            <el-breadcrumb-item>栏目显示</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片区域 -->
        <el-card>
            <!-- 警告 -->
            <el-alert
                title="添加栏目信息"
                type="info"
                center
                :closable="false"
                show-icon>
            </el-alert>
            <!-- 步骤条 -->
            <el-steps :active="activeName - 0" finish-status="success" align-center>
                <el-step title="基本信息"></el-step>
                <el-step title="栏目内容"></el-step>
                <el-step title="栏目审核"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>
            <!-- 标签页 -->
            <el-tabs v-model="activeName" tab-position="left" :before-leave="beforeTabLeave">
                <el-tab-pane label="基本信息" name="0">
                    <el-form :model="addForm" 
                    label-position="top"  
                    :rules="addFormRules"
                    ref="addFormRef" 
                    label-width="100px">
                       <el-form-item label="栏目名称" prop="title">
                            <el-input placeholder="请输入名称   " v-model="addForm.title"></el-input>
                        </el-form-item>
                        <el-form-item label="栏目简介" prop="introduce">
                            <el-input 
                            autosize 
                            type="textarea" 
                            placeholder="请输入内容"
                            v-model="addForm.introduce">
                            </el-input>
                        </el-form-item>
                        <!-- 级联选择 -->
                        <el-form-item label="部门" prop="navId">
                            <el-cascader
                            v-model="addForm.navId"
                            :options="branchList"
                            :props="branchProps"
                            @change="branchChange">
                            </el-cascader>
                        </el-form-item>
                        <!-- 上传封面 http://192.168.1.107:8222/api/oss/saveFile-->
                        <el-form-item label="封面">
                            <el-upload
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                            :action="baseUrl + 'oss/saveFile'"
                            class="avatar-uploader">
                            <img v-if="addForm.cover" :src="addForm.cover" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                    <!-- 提交及下一步 -->
                    <el-button class="nextBtn" type="primary" @click="putFirst('addFormRef')">下一步</el-button>
                </el-tab-pane>

                <el-tab-pane label="栏目内容" name="1">
                    <!-- 富文本编辑器 -->
                    <tinymce  :height="300"/>
                    <!-- 添加栏目及下一步 -->
                    <el-button class="nextBtn" type="primary" @click="addEdit">下一步</el-button> 
                </el-tab-pane>

                <el-tab-pane label="栏目审核" name="2">
                    <div v-html="allContent">{{allContent}}</div>
                    <el-button class="nextBtn" type="primary" @click="success">完成</el-button> 
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>
import tinymce  from  '../Tinymce/index.vue'
import Url from '../../../config'
export default {
    components: {
        tinymce,
    },
    data() {
        return {
            baseUrl: Url.baseUrl, // 图片上传根地址
            // 表单里的数据对象
            addForm: {
                title: '',   // 栏目名称
                introduce: '',  // 栏目简介内容
                navId: '', //传入最低级部门id
                cover: '',  // 默认封面
            },
            // 获取级联选择数据
            branchList: [],
            // 级联选择框的配置对象
            branchProps: {
                value: 'navId',
                label: 'navigation',
                children: 'deps',
                expandTrigger: 'hover',
                checkStrictly: true
            },
            // 绑定标签页name和步骤条active
            activeName: '0',
            addFormRules: {
                title: [
                    { required: true, message: '请输入栏目名称', trigger: 'blur' }
                ],
                introduce: [
                    { required: true, message: '请输入栏目简介', trigger: 'blur' }
                ],
                navId: [
                    { required: true, message: '请选择部门' }
                ],
                cover: [
                    { required: true, message: '请上传封面', trigger: 'blur' }
                ],
            },
            // 栏目审核
            allContent: ''
        }
    },
    mounted() {
        this.getAllBranchList()
        // console.log(this.$http);
    },
    methods: {
         // 获取所有部门(级联选择)
        async getAllBranchList() {
            await this.$http.get('/coreService/navigation/getAllAndChild')
            .then((res) => {
                if(res.status == 200) {
                    res.data.data.navigation.map((value, key) => {
                        this.branchList.push(value)
                        // console.log(res);
                    })
                }
            })
            .catch((err) => {
                console.log(err);
            })
        },
        // 级联选中项器选中项变化，会触发这个函数
        branchChange(item) {
            // 获取部门的navId
            this.addForm.navId = item[item.length - 1]
        },
        handleAvatarSuccess(res, file) {
            console.log("成功");
            console.log(res)// 上传响应
            console.log(URL.createObjectURL(file.raw))// base64编码
            this.addForm.cover = res.imgUrl
        },
        //上传之前
        beforeAvatarUpload(file) {
        // console.log("上传前");
        // console.log(file);
            const isJPG = file.type === 'image/jpeg'
            const isLt2M = file.size / 2048 / 2048 < 2
            if (!isJPG) {
                 this.$message.error('上传头像图片只能是 JPG 格式!')
            }
            if (!isLt2M){
                  this.$message.error('上传头像图片大小不能超过 4MB!')
            }
            return isJPG && isLt2M
        },
        // 添加栏目基本信息
        putFirst(addFormRef) {
            this.$refs[addFormRef].validate((valid) => {
                if(!valid){
                    this.$message.warning("请填写必填表单")
                }
                this.$http.post('/coreService/mediaDetail/add',this.addForm)
                .then((res) => {
                    // console.log(res);
                    if(res.status == 200) {
                        // this.basicId = res.data.data.mediaDetail.id
                        this.$store.commit("getMsg",res.data.data.mediaDetail.id)  // 存入vuex中
                        this.$message.success("创建基本信息成功")
                        if (Number(this.activeName) < 3) {
                            this.activeName = Number(this.activeName) + 1 + ""
                        }
                    }
                })
                .catch((err) => {
                    console.log(err);
                })
            })
        },
        // 添加栏目内容
        addEdit() {
            if(this.$store.state.textContent == '') {
                this.$message.warning("请确认编辑")
            }else {
                let params = {
                    content: this.$store.state.textContent,
                    mediaId: this.$store.state.basicId
                }
                this.$http.post("/coreService/description/saveContent", params)
                .then((res) => {
                    if(res.data.status === 20000) {
                        this.$message.success("创建栏目内容成功")
                        if (Number(this.activeName) < 3) {
                            this.activeName = Number(this.activeName) + 1 + ""
                        }
                        this.getAllContent()
                    }
                })
                .catch((err) => {
                    console.log(err);
                })
            }
        },
        // 栏目审核，显示所有
        getAllContent() {
            this.$http.get('/coreService/mediaDetail/getAll/' + this.$store.state.basicId)
            .then((res) => {
                if(res.data.status == 20000) {
                    console.log(res.data.data.description.content);
                    this.allContent = res.data.data.description.content
                }
            })
            .catch((err) => {
                console.log(err);
            })
        },
        // 完成功能
        success() {
            this.$store.commit('getMsg', '')
            this.$store.commit('getVideoId', '')
            this.$store.commit('getTextContent', '')
            this.$router.push('/show')
            this.$message.success("完成栏目添加")
        },
        // 点击tabs触发
        handleClick(tab, event) {
            // console.log(tab.name);
            // console.log(event);
        },
        // 切换tabs前进行判断
        beforeTabLeave(activeName,oldActiveName) {
            console.log(activeName);
            console.log(oldActiveName);
            if(oldActiveName === '0' && this.$store.state.basicId == '') {
                this.$message.info("请完成当前步骤")
                return false
            }
            if( oldActiveName === '1' && this.$store.state.textContent == '') {
                this.$message.info("请完成当前步骤")
                return false
            }
            if((activeName === '0' && this.$store.state.basicId !== '') || (activeName === '1' && this.$store.state.textContent !== '')) {
                this.$message.info("您已完成填写")
                return false
            }
        },
    },
}
</script>

<style lang="less" scoped>
.el-card {
    margin-top: 16px;
}
.el-steps {
    margin-top: 20px;
    margin-bottom: 20px;
}
.addBtn {
    margin-top: 8px;
}
.nextBtn {
    float: right;
    margin-top: 20px
}
</style>